<template>
    <input type="text" v-model="keyWord">
    <h3>{{keyWord}}</h3>
</template>

<script>
    import {ref, customRef} from 'vue'


    export default {
        name: 'App',
        setup() {
            //自定义的ref,名为ref
            function myRef(value) {
                let timer
                return customRef((track, trigger) => {
                    return {
                        get() {
                            //追踪一下keyWord的改变,通知vue追踪value的变化
                            track()
                            return value
                        },
                        set(newValue) {
                            clearTimeout(timer)
                            //通知VUE去重新解析m模板
                            timer = setTimeout(() => {
                                value = newValue
                                trigger()
                            }, 500)
                        }

                    }
                })
            }


            //使用vue提供的Ref
            // let keyWord = ref('hello')
            //使用程序员自定义的ref
            let keyWord = myRef('hello')
            return {
                keyWord
            }
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
